<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">
    <body>
        <ui:composition>
            <div>Equipos</div>
            <div>
                <div class="teams">
                    <div class="teamPlayerList teams red-row">
                        <h:outputText value="#{gameCTFStatistics.game.duration}" />
                        <p:dataList value="#{gameCTFStatistics.game.redTeam}" var="player" itemType="none"  >
                            <div class="playerImage">
                                <ui:insert name="playerList" >
                                    <ui:include src="player_image.xhtml" >
                                        <ui:param name="imageSize" value="80" />
                                        <ui:param name="playerId" value="#{player.id}" />
                                    </ui:include>
                                </ui:insert>
                                <div class="playerPoints">#{gameCTFStatistics.game.points(player)} Puntos</div>
                            </div>
                        </p:dataList>
                    </div>
                    <div class="teamPlayerList teams blue-row">
                        <h:outputText value="#{gameCTFStatistics.game.duration}" />
                        <p:dataList value="#{gameCTFStatistics.game.blueTeam}" var="player" itemType="none"  >
                            <div class="playerImage">
                                <ui:insert name="playerList" >
                                    <ui:include src="player_image.xhtml" >
                                        <ui:param name="imageSize" value="80" />
                                        <ui:param name="playerId" value="#{player.id}" />
                                    </ui:include>
                                </ui:insert>
                                <div class="playerPoints">#{gameCTFStatistics.game.points(player)} Puntos</div>
                            </div>
                        </p:dataList>
                    </div>
                </div>
                <br/>
                <p:separator/>
                <div>Capturas</div>
                <p:dataTable var="capture" rowIndexVar="rowIndex" value="#{gameCTFStatistics.game.captures}"
                             rowStyleClass="#{(capture.team eq 'BLUE') ? 'blue-row' : 'red-row'}" style="width: 40%;">
                    <p:column headerText="Jugadores">
                        <div class="gamePlayerList teams">
                            <p:dataList value="#{capture.players}" var="player" itemType="none"  >
                                <div class="playerImage">
                                    <ui:insert name="playerList" >
                                        <ui:include src="player_image.xhtml" >
                                            <ui:param name="imageSize" value="45" />
                                            <ui:param name="playerId" value="#{player.id}" />
                                        </ui:include>
                                    </ui:insert>
                                </div>
                            </p:dataList>
                        </div>
                    </p:column>
                    <p:column headerText="Tiempo">
                        <h:outputText value="#{capture.formattedGameTime}" />
                    </p:column>
                </p:dataTable>
            </div>
        </ui:composition>
    </body>
</html>
